<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签新增</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../../static/css/me.css">
</head>
<body>

  <!--导航-->
  <nav th:replace="admin/_fragments :: menu(3)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container"><!-- container是一个一个容器来放 -->
      <div class="ui inverted secondary stackable menu">


        <!-- 导航左边,m-item移动端的时候隐藏 -->
        <h2 class="ui teal header item">后台管理</h2>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini home icon"></i>&nbsp;&nbsp;博客</a><!-- icom都是图标，官方文档里面有 -->
        <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>&nbsp;&nbsp;分类</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>&nbsp;&nbsp;标签</a>


        <!-- 右边头像 -->
        <div class="right m-item m-mobile-hide menu">
          <!-- item自适应居中 -->
          <!-- dropdown是bootstrap的组件，头像下拉框组件 -->
          <div class="dropdown item">
            <img class="ui avatar image" src="http://i2.tiimg.com/724771/7aafc5cff55c9351.jpg">
            <button class="btn btn-default dropdown-toggle m-zdys" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              一个人的~
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a href="#" th:href="@{/admin/logout}">注销</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">退出</a></li>
            </ul>
          </div>
        </div>


      </div>
    </div>


    <!-- 加上面包导航，移动端点击面包导航才显示出来,m-right-top自定义样式显示到右边,m-mobile-show移动端才显示这个图标 -->
    <!-- menu toggle这个只是为了让jquery获取这个图标的，当点击这个图标，就把m-mobile-hide样式变为显示 -->
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><!-- icon button图标按钮 -->
      <i class="sidebar icon"></i><!-- 面包样式 -->
    </a>
  </nav>

  <div class="ui attached pointing menu">
    <div class="ui container">
      <div class="right menu">
        <a href="#" th:href="@{/admin/types-input}"  class="active teal item">新增</a>
        <a href="#" th:href="@{/admin/types}" class="item">列表</a>
      </div>
    </div>
  </div>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-big">
    <div class="ui container">
      <form action="#" method="post" class="ui form" th:action="*{id}==null ?  @{/admin/tag1} : @{/admin/tag1/{id}(id=*{id})}">
        <input type="hidden" name="id" th:value="*{id}">
        <div class="required field">
          <div class="ui left labeled input">
            <label class="ui teal basic label">名称</label>
            <input type="text" name="name" placeholder="分类名称" th:value="${id!=null?tag.name:''}">
          </div>
        </div>

        <!--前端验证提示信息-->
        <div class="ui error message"></div>

        <!--后端验证提示信息-->
        <div th:text="${message}" th:if="${not #strings.isEmpty(message)}" class="ui negative message" >
          <i class="close icon"></i>
          <div class="header">提示：</div>
          <p>对不起，操作失败！</p>
        </div>

        <div class="ui right aligned container">
          <button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button>
          <button class="ui teal submit button">提交</button>
        </div>

      </form>
    </div>
  </div>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="admin/_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive m-mobile-hide">
    <div class="ui center aligned container"><!-- container容器,center aligned所有容器居中 -->


      <!-- grid就是一个一个格子 , 相当于bootstrap的栅格系统 , grid是分成16份-->
      <!-- 这里前面1格占1分，3格都占3份，后面一格占6份 -->
      <div class="ui inverted divided stackable grid"><!-- divided这个对grid栅格系统加上分隔线 -->
        <!-- 占几份直接用英文的数字 -->


        <!-- 第一个格子 -->
        <div class="four wide column"><!-- four4份 -->
          <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
            <div class="item"><!-- item居中对齐 -->
              <!-- 图片，rounded图片是圆角,ewm-dx自定义图片大小 -->
              <img src="../../static/images/haoyou.png" class="ui rounded image ewm-dx" alt="" >
            </div>
          </div>
        </div>


        <!-- 第二个格子 -->
        <div class="three wide column"><!-- three3份 -->
          <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4><!-- 标题 -->
          <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
            <a href="#" class="item">用户故事</a>
            <a href="#" class="item">用户故事</a>
            <a href="#" class="item">用户故事</a>
          </div>
        </div>


        <!-- 第三个格子 -->
        <div class="three wide column"><!-- three3份 -->
          <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4><!-- 标题 -->
          <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
            <a href="#" class="item">Email: 2247605840@qq.com</a>
            <a href="#" class="item">QQ: 2247605840</a>
            <a href="#" class="item">微信: xinyikuoai</a>
          </div>
        </div>


        <!-- 第四个格子 -->
        <div class="six wide column"><!-- seven7份 -->
          <h4 class="ui inverted header m-text-thin m-text-spaced">温暖一刻!</h4><!-- 标题 -->
          <p class="m-text-thin m-text-spaced m-opacity-mini">真正属于你的💖，不应该是伤人的冰块，应该是一杯温暖人的热茶!</p>
        </div>
      </div>


      <!-- 最底下的,divider分割线,section跟上面的div的间隔s -->
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opacity-mini">属于你的终究是我</p>



    </div><!-- 最外面的容器container -->
  </footer>

  <!--/*/<th:block th:replace="_fragments :: script">/*/-->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <!--/*/</th:block>/*/-->

  <script>

    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
      on : 'hover'
    });

    $('.ui.form').form({
      fields : {
        title : {
          identifier: 'name',
          rules: [{
            type : 'empty',
            prompt: '请输入分类名称'
          }]
        }
      }
    });

    //消息提示关闭初始化
    $('.message .close')
            .on('click', function () {
              $(this)
                      .closest('.message')
                      .transition('fade');
            });

  </script>
</body>
</html>